<script setup>
import { ref } from 'vue'
import { aiChatService } from '@/apis/ai.js'

// 存储当前要滚动到的记录ID
const currentID = ref(null)

// 输入框输入的值
const inputValue = ref(null)

// 是否显示加载动画
const is_loading = ref(false)

// 是否允许提交用户问题
const allowSubmit = ref(true)

// AI对话记录列表
const aiChatList = ref([{ id: 'record-0', role: 'ai', content: '你好，我是乐小游AI助手，很高兴和你见面。有任何旅行相关的问题都可以问我噢!' }])

// 点击展开新对话
const onClickLeft = () => {
	if (allowSubmit.value) {
		aiChatList.value = [{ id: 'record-0', role: 'ai', content: '你好，我是乐小游AI助手，很高兴和你见面。有任何旅行相关的问题都可以问我噢!' }]
	}
}

// 发送用户问题获取AI对话
const aiChatFun = async () => {
	// 加载状态
	is_loading.value = true
	// 是否允许提交
	allowSubmit.value = false

	// 当前AI回复显示的字符索引
	let currentCharIndex = 0

	const res = await aiChatService(inputValue.value)
	currentID.value = `record-${aiChatList.value.length}`
	// 更新对话列表
	aiChatList.value.push({ id: currentID.value, role: 'ai', content: '' })

	// 显示AI回答的函数
	const showAnswer = () => {
		setTimeout(() => {
			if (currentCharIndex < res.data.length) {
				// 更新当前显示的AI回复内容
				const newContent = aiChatList.value[aiChatList.value.length - 1].content + res.data[currentCharIndex]
				aiChatList.value[aiChatList.value.length - 1].content = newContent
				currentCharIndex++
				showAnswer()
			} else {
				allowSubmit.value = true
			}
		}, 50)
	}

	setTimeout(() => {
		// 加载完成
		is_loading.value = false
		showAnswer()
	}, 1500)
}

// 提交用户问题
const onClickRight = async () => {
	if (inputValue.value && allowSubmit.value) {
		currentID.value = `record-${aiChatList.value.length}`

		// 将用户输入的问题添加到对话记录列表
		aiChatList.value.push({ id: currentID.value, role: 'user', content: inputValue.value })

		// 获取AI对话
		await aiChatFun()

		// 清空输入框
		inputValue.value = ''
	} else {
		// 清空输入框
		inputValue.value = ''
		uni.showToast({
			icon: 'none',
			title: 'AI正在回复，请稍等片刻'
		})
		return
	}
}
</script>

<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll" :scroll-into-view="currentID">
			<view class="content">
				<view class="content-item" v-for="(item, index) in aiChatList" :key="index" :id="item.id" :class="[item.role]">
					<view v-if="is_loading && item.role === 'ai' && index === aiChatList.length - 1">
						<up-loading-icon text="AI正在思考中" color="#2a86f1" textColor="#2a86f1"></up-loading-icon>
					</view>

					<view v-else>
						{{ item.content }}
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="input">
			<view class="left" @tap="onClickLeft">
				<up-icon name="reload" size="25"></up-icon>
				<view class="text">新开对话</view>
			</view>

			<up-input
				v-model.trim="inputValue"
				placeholder="有如何旅行问题都可以问我哦"
				shape="circle"
				border="none"
				clearable
				customStyle="backgroundColor:#fff;margin:0 20rpx;padding:20rpx"
			></up-input>

			<view class="right" @tap="onClickRight">
				<text class="iconfont icon-fasong"></text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100vh;
	background-color: #ebf2fc;

	.scroll {
		height: 90%;
		padding: 20rpx;

		.content {
			display: flex;
			flex-direction: column;

			.content-item {
				margin: 20rpx 0;
				padding: 20rpx;
				border-radius: 20rpx;
			}

			.ai {
				display: flex;
				align-self: flex-start;
				background-color: #fff;
				color: #333;
			}

			.user {
				display: flex;
				align-self: flex-end;
				background-color: #0087f3;
				color: #fff;
			}
		}
	}

	.input {
		height: 10%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ebf2fc;

		.left {
			width: 15%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 25rpx;
			}
		}

		.right {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #0081f8;
			display: flex;
			justify-content: center;
			align-items: center;

			.iconfont {
				font-size: 40rpx;
				color: #fff;
			}
		}
	}
}
</style>
